<!-- 材料明细列表 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>选择材料</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_nkr942sxu7.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <!-- <div class="search_box" ref="searchbox">
                <div class="cell_box">
                    <div class="cell_name">材料名称:</div>
                    <div class="cell_cont">
                        <el-input
                            placeholder="请输入内容"
                            v-model="matName"
                            class="public_input"
                            clearable>
                        </el-input>
                    </div>
                </div>
                <div class="cell_box">
                    <div class="cell_name">材料规格:</div>
                    <div class="cell_cont">
                        <el-input
                            placeholder="请输入内容"
                            v-model="matSpec"
                            class="public_input"
                            clearable>
                        </el-input>
                    </div>
                </div>
                <div class="cell_but">
                    <el-button @click="searchBut" class="border_but" type="primary">查询</el-button>
                </div>
            </div> -->
            <div class="table_box" ref="tablecontainer">
                <div class="tab_cont" ref="tablebox">
                    <el-table 
                        :data="clmxList" 
                        @row-click="rowclick" 
                        ref="multipleTable" 
                        @selection-change="selectionchange" 
                        height="100%" 
                        border 
                        :select-on-indeterminate="isSingle == 1 ? false : true"
                        @select="select"
                        @select-all="selectall"
                        style="width: 100%">
                        <el-table-column type="selection" width="50" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="materialName" align="center" show-overflow-tooltip label="名称" min-width="130"></el-table-column>
                        
                        <el-table-column prop="specificationName" align="center" show-overflow-tooltip label="规格" min-width="100"></el-table-column>
                        
                        <el-table-column prop="quantity" align="center" show-overflow-tooltip label="合同数量" width="110">
                        </el-table-column>

                        <el-table-column prop="addTimeApprNum" align="center" show-overflow-tooltip label="已采购数量" width="130">
                            <template slot-scope="scope">
                                <span style="color: #F70505;" v-if="scope.row.addTimeApprNum > scope.row.quantity">{{scope.row.addTimeApprNum}}</span>
                                <span style="color: #30C776;" v-if="scope.row.addTimeApprNum == scope.row.quantity">{{scope.row.addTimeApprNum}}</span>
                                <span style="color: #FF9F0F;" v-if="scope.row.addTimeApprNum < scope.row.quantity">{{scope.row.addTimeApprNum}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位" min-width="70"></el-table-column>
                        <el-table-column prop="price" align="center" show-overflow-tooltip label="单价" min-width="70"></el-table-column>
                        <el-table-column prop="taxRate" align="center" show-overflow-tooltip label="税率" min-width="70">
                            <template slot-scope="scope">
                                <span>{{scope.row.taxRate}}%</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- <div class="pagination_box" ref="paginations">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
                </div> -->
            </div>
            <div class="but_box">
				<el-button class="cancelClass" @click="cancel">取消</el-button>
				<el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
			</div>
        </div>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        input: '',
                        showApp: false,
                        isSingle: '',
                        projectId: '',
                        pagesize: 9999999,
                        pageindex: 1,
                        totals: 0,
                        clmxList: [],
                        selected: [],
                        selectArr: [],
                        matName: '',
                        matSpec: '',
                        objdata: '',
                        type: '',
                        orderList: []
					};
				},
				methods: {
                    searchBut () {
                        this.pageindex = 1
                        this.getClmxListData()
                    },
                    selectall () {
                        if (this.isSingle == 1) {
                            this.$refs.multipleTable.clearSelection();
                        }
                    },
                    select(selection, row) {
                        if (this.isSingle == 1) {
                            if (selection.length > 1) {
                                var del_row = selection.shift()
                                for (var i = 0; i < this.clmxList.length; i++) {
                                    if (del_row.typeid == this.clmxList[i].typeid) {
                                        this.$refs.multipleTable.toggleRowSelection(this.clmxList[i], false);
                                    }
                                }
                            }
                        }
                    },
                    // 取消
                    cancel () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    // 提交
                    confirms () {
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var data = {
                            list: this.selected,
                            info: JSON.parse(this.objdata)
                        }
                        parent.$('#publicValue').val(JSON.stringify(data));
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        }, 100);
                    },
                    // 每页显示条数切换
					handleSizeChange(val) {
						this.pagesize = val;
                        this.pageindex = 1;
                        this.getClmxListData()
					},
					// 页数切换
					handleCurrentChange(val) {
                        this.pageindex = val;
                        this.getClmxListData()
                    },
                    // 点击某一行选择
					rowclick(row, column, event) {
                        if (this.isSingle == 1) {
                            this.$refs.multipleTable.clearSelection();
                        }
						if (row) {
                            this.$refs.multipleTable.toggleRowSelection(row);
						}
                    },
                    selectionchange (val) {
                        this.selected = val;
                    },
                    // 获取材料列表
                    getClmxListData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            url: baseUrl + '/Material/GetPurchaseMaterialsByContractNo',
                            data: {
                                contractId: JSON.parse(that.objdata).id,
                                page: that.pageindex,
                                pageSize: that.pagesize,
                                // matName: that.matName,
                                // matSpec: that.matSpec
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                if (that.selectArr.length > 0) {
                                    for (var j = 0; j < that.selectArr.length; j++) {
                                        for (var i = 0; i < res.data.length; i++) {
                                            if (res.data[i].materialId == that.selectArr[j].materialId && res.data[i].specificationId == that.selectArr[j].specificationId) {
                                                res.data.splice(i, 1)
                                            }
                                        }
                                    }
                                }
                                that.clmxList = res.data
                                if (that.type == 1) {
                                    var newList = []
                                    for (var j = 0; j < that.orderList.length; j++) {
                                        for (var i = 0; i < res.data.length; i++) {
                                            if (res.data[i].materialId == that.orderList[j].materialId && res.data[i].specificationId == that.orderList[j].specificationId) {
                                                newList.push(res.data[i])
                                            }
                                        }
                                    }
                                    that.clmxList = newList
                                }
                                setTimeout(function () {
                                    if (that.type == 1) {
                                        for (var i = 0; i < that.clmxList.length; i++) {
                                            that.$refs.multipleTable.toggleRowSelection(that.clmxList[i]);
                                        }
                                    } else {
                                        for (var i = 0; i < that.clmxList.length; i++) {
                                            if (that.clmxList[i].addTimeApprNum < that.clmxList[i].quantity) {
                                                that.$refs.multipleTable.toggleRowSelection(that.clmxList[i]);
                                            }
                                        }
                                    }
                                }, 100)
                                that.totals = res.total
                            }
                        });
                    },
				},
				mounted() {
                    this.showApp = true;
                    var that = this;
					setTimeout(function () {
                        // that.$refs.tablecontainer.style.height = 'calc(100% - ' + (that.$refs.searchbox.offsetHeight + 70) + 'px)';
                        that.$refs.tablecontainer.style.height = 'calc(100% - ' + (0 + 70) + 'px)';
						// var aa = that.$refs.paginations.offsetHeight;
                        var aa = 0
						var ss = 'calc(100% - ' + aa + 'px)';
						that.$refs.tablebox.style.height = ss;
                    }, 2);
                    // this.projectId = getQuerys('recid')
                    this.isSingle = getQuerys('isSingle')
                    this.objdata = decodeURIComponent(getQuerys('objdata'))
                    if (getQuerys('selectArr')) {
                        this.selectArr = JSON.parse(decodeURIComponent(getQuerys('selectArr')))
                    }
                    this.type = getQuerys('type')
                    if (this.type == 1) {
                        this.orderList = JSON.parse(decodeURIComponent(getQuerys('publicData')))
                        
                    }
                    this.getClmxListData()
                    // getQuerys()
				}
			});
		</script>
	</body>
	<style>
		.but_box {
			display: flex;
			justify-content: center;
			height: 70px;
			padding-bottom: 20px;
			align-items: flex-end;
			background: #fafbfc;
			border-top: 1px solid #ebebeb;
		}
		.but_box .el-button {
			width: 120px;
			height: 32px;
			background: #5574d7;
			border-radius: 5px;
			padding: 0;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
		}

		.but_box .el-button--primary:focus,
		.but_box .el-button--primary:hover {
			background: rgba(85, 116, 215, 0.6);
			border-color: rgba(85, 116, 215, 0.6);
			color: #fff;
		}
		.but_box .el-button--primary.is-active,
		.but_box .el-button--primary:active {
			background: rgba(85, 116, 215, 0.8);
			border-color: rgba(85, 116, 215, 0.8);
			color: #fff;
		}
		.but_box .cancelClass {
			background: transparent;
			border: 1px solid #bbbbc5;
			color: #333333;
		}

		.but_box .cancelClass:focus,
		.but_box .cancelClass:hover {
			color: rgba(85, 116, 215, 1);
			border-color: rgba(85, 116, 215, 0.1);
			background-color: #ecf5ff;
		}
		.but_box .cancelClass:active {
			color: rgba(85, 116, 215, 0.8);
			border-color: rgba(85, 116, 215, 0.8);
			outline: none;
        }
        .table_box {
            padding: 3.09vh 3.67vw;
            height: calc(100% - 70px);
        }

        .el-table th {
			background: #f8f8f8;
		}
		.el-table td,
		.el-table th {
			color: #333333;
			padding: 0;
			height: 32px;
		}
		.el-tooltip__popper.is-dark {
			background: #ffffff;
			color: #333333;
			box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
		}
		.el-tooltip__popper[x-placement^='top'] .popper__arrow::after {
			border-top-color: #ffffff;
		}
		.el-tooltip__popper[x-placement^='top'] .popper__arrow {
			border-top-color: #ffffff;
		}
		.el-table--border:after,
		.el-table--group:after,
		.el-table:before {
			background-color: #e2e2e2;
		}
		.el-table--border,
		.el-table--group {
			border-color: #e2e2e2;
		}
		.el-table td,
		.el-table th.is-leaf {
			border-bottom: 1px solid #e2e2e2;
		}

		.el-table--border th,
		.el-table--border th.gutter:last-of-type {
			border-bottom: 1px solid #e2e2e2;
		}
		.el-table--border td,
		.el-table--border th {
			border-right: 1px solid #e2e2e2;
        }
        /* 分页 */
        .pagination_box {
            padding: 2.7vh 0 0 0;
        }
        .el-pagination {
            display: flex;
            justify-content: center;
        }
        .pagination_box .el-pagination button {
            border: 1px solid #D6D6D6;
            border-radius: 5px!important;
            background-color: transparent!important;
        }
        .pagination_box .el-pager li {
            border-radius: 5px!important;
            border: 1px solid #D6D6D6!important;
            background: transparent!important;
        }
        .el-pagination.is-background .el-pager li:not(.disabled):hover {
            color:#5574D7;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background:#5574D7!important;
            border: none!important;
            color: #fff;
        }
        .search_box {
            display: flex;
            flex-wrap: wrap;
        }
        .cell_box {
            display: flex;
            align-items: center;
            padding-top: 20px;
            padding-left: 3.67vw;
        }
        .cell_name {
            white-space: nowrap;
            padding-right: 10px;
        }
        .cell_cont {

        }
        .cell_but {
            padding-top: 20px;
            margin-left: 3.67vw;
        }
	</style>
</html>
